<template>
    <div>
        <div class="member-top">

            <el-input class="member-input" v-model="input" placeholder="请输入会员姓名/会员号/扫描会员"></el-input>
            <el-select class="member-select" v-model="value" placeholder="请选择状态">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button class="member-button member-button1" @click='seach'>搜索</el-button>
            <el-button class="member-button" @click="dialogVisible = true">新增会员</el-button>
            <el-button class="member-button" @click="isshow = true">贴标签</el-button>
        </div>
        <div class="member-conter">
            <div class="conter " :class="{conteractive:item.memberId==cur}" v-for="item in memberList"
                :key="item.memberId" @click="cur=item.memberId">
                <div class='conter-top'>
                    <div class="top-img">
                        <img src="../../assets/logo.png" alt="">
                    </div>
                    <div class="top-text">
                        <div class="text-span">
                            <span>{{item.memberName}}</span>
                            <span>{{item.memberPhoneNumber}}</span></div>
                        <div class="text-span-icon">
                            <img src="" alt="">
                            <span v-if="item.memberVipLevelId==1">普通会员</span>
                            <span v-else-if="item.memberVipLevelId==2">黄金会员</span>
                            <span v-else-if="item.memberVipLevelId==3">砖石会员</span>
                            <!-- <button>寿星</button> -->
                        </div>
                    </div>
                    <div class="border-radius">
                        <el-checkbox></el-checkbox>
                        <!-- <el-checlbox type="checkbox" v-model="checked" id="border-radius-input" /> -->
                    </div>
                </div>
                <div class="conter-biaoqian">
                    <div class="conter-biaoqian1" v-for="lable in item.labels" :key="lable.id">{{lable}}</div>
                </div>
                <div class="conter-button">
                    <div class="conter-el-button"
                        @click="id=item.memberId;flag=item.flag;name=item.memberName;idcard=item.memberIdCard; isfalse = true"
                        v-if="item.flag==1">会员卡挂失</div>
                    <div class="conter-el-button" v-if="item.flag==2"
                        style="disabled:disabled ; background-color:#a8a8a8 ;background-image:none">会员卡已挂失</div>
                    <div class="conter-el-button" v-if="item.flag==1"
                        style="disabled:disabled ; background-color:#a8a8a8 ;background-image:none">会员卡已解挂</div>
                    <div class="conter-el-button"
                        @click="id=item.memberId;flag=item.flag;name=item.memberName;idcard=item.memberIdCard; isSolutionToHang = true"
                        v-if="item.flag==2">
                        会员卡解挂</div>
                    <div class="conter-el-button">会员卡补办</div>
          
                    <div class="conter-el-button" @click="memberSech(item.memberId) ;id=item.memberId;drawer = true">查看详情</div>
                    <!-- id=item.id;drawer = true -->
                </div>
                <el-drawer :visible.sync="drawer" :with-header="false">

                    <Message :id='id'></Message>
                </el-drawer>
            </div>
            <div class="member-pagination">
                <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
                    :current-page="currentPage" @size-change="handleSizeChange" :page-size="pageSize" :total="total">
                </el-pagination>
            </div>

        </div>
        <el-dialog title="新增会员" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
            <Newmembers></Newmembers>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
        </el-dialog>
        <el-dialog title="设置标签" :visible.sync="isshow" width="60%" :before-close="handleClose">
            <Label></Label>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isshow = false">取 消</el-button>
                <el-button type="primary" @click="isshow = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="会员挂失" :visible.sync="isfalse" width="60%" :before-close="handleClose">
            <ReportTheLossOf :id='id' :flag='flag' :name="name" :idcard='idcard'></ReportTheLossOf>

        </el-dialog>
        <el-dialog title="会员解挂" :visible.sync="isSolutionToHang" width="60%" :before-close="handleClose">
            <SolutionToHang :id='id' :flag='flag' :name="name" :idcard='idcard'></SolutionToHang>

        </el-dialog>
    </div>

</template>

<script>
    import Message from '../../components/message'
    import Newmembers from '../../components/Newmembers'
    import Label from '../../components/label'
    import ReportTheLossOf from '../../components/reportTheLossOf'
    import SolutionToHang from '../../components/SolutionToHang'
    import {
        createNamespacedHelpers
    } from "vuex";
    const {
        mapActions,
        mapState,
        mapMutations
    } = createNamespacedHelpers(
        "member"
    );
    export default {
        components: {
            Message,
            Newmembers,
            Label,
            ReportTheLossOf,
            SolutionToHang
        },
        data() {
            return {
                checked: true,
                id: "",
                flag: '',
                idcard: '',
                name: '',
                input: '',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                seachdata: {
                    phone: '',
                    name: ''
                },
                cur: "1"
            }
        },
        mounted() {
            this.searchReceptionistMember(this.seachdata)
            
        },
        computed: {
            ...mapState(['pages', 'total', 'memberList', 'pageSize', 'currentPage']),
            //修改新增会员弹框状态
            dialogVisible: {
                get() {
                    return this.$store.state.member.dialogVisible
                },
                set(val) {
                    this.$store.state.member.dialogVisible = val;
                }
            },
            //修改查看详情弹框状态
            drawer: {
                get() {
                    return this.$store.state.member.drawer
                },
                set(val) {
                    this.$store.state.member.drawer = val;
                }
            },
            //修改贴标签弹框状态
            isshow: {
                get() {
                    return this.$store.state.member.isshow
                },
                set(val) {
                    this.$store.state.member.isshow = val;
                }
            },
            //修改会员卡挂失状态
            isfalse: {
                get() {
                    return this.$store.state.member.isfalse
                },
                set(val) {
                    this.$store.state.member.isfalse = val;
                }
            },
            //
            isSolutionToHang: {
                get() {
                    return this.$store.state.member.isSolutionToHang
                },
                set(val) {
                    this.$store.state.member.isSolutionToHang = val;
                }
            },

        },
        methods: {
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.setPageSize(val);
                this.memberSech(this.seachdata);
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.setCurrentPage(val);
                this.searchReceptionistMember(this.seachdata);
            },
            //弹框确定与取消的按钮    
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            ...mapMutations(['setCurrentPage', 'setpageSize', 'setpageSize']),
            ...mapActions(['searchReceptionistMember','memberSech']),
            seach() {

                if (this.input - 0) {

                    this.seachdata.phone = this.input

                } else {

                    this.seachdata.name = this.input
                }
                this.searchReceptionistMember(this.seachdata)
                this.seachdata.phone = ''
                this.seachdata.name = ''
            },
          
        }
    }
</script>

<style scoped lang="scss">
    /deep/ .el-dialog__header {
        background-image: linear-gradient(90deg, #f7c38e, #f5bc80);
        color: #fff;
    }

    /deep/ .el-dialog__title {
        font-size: 18px;
        font-weight: 700;
        color: white;
    }

    .member-top {
        width: 99.5%;
        height: 55px;
        background-color: white;

        padding-top: 10px;

        .member-input {
            width: 25%;
            font-size: 14px;
            margin-left: 10px;
            margin-right: 15px;

            /deep/ .el-input__inner {
                color: #a8a8a8;
                background-color: #eeeeee;
            }
        }

        .member-select {
            width: 20%;
            margin-right: 15px;

            /deep/ .el-input__inner {
                font-size: 14px;
                background-color: #eeeeee;
            }
        }

        .member-button {
            width: 12%;
            margin-right: 15px;
            border: 1px solid #0085ff;

            /deep/ span {
                font-size: 14px;
                color: #0085ff;
            }
        }

        .member-button1 {
            background-image: linear-gradient(90deg, #0af, #0085ff);
            color: #fff;

            /deep/ span {
                font-size: 14px;
                color: #fff;
            }
        }
    }

    .member-conter {
        width: 99.5%;
        height: 450px;

        background-color: #eff2f6;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .conteractive {
            border: 1px solid #0085ff;
            box-shadow: 0px 0px 8px #0af;
        }

        .conter {
            margin-top: 10px;
            width: 23%;
            height: 180px;
            // border: 1px solid red;
            margin-left: 8px;
            margin-right: 8px;
            border-radius: 10px;
            background-color: white;

            .conter-top {
                width: 95%;
                height: 60px;

                margin: 0 auto;
                margin-bottom: 5px;
                display: flex;

                .top-img {
                    width: 28%;
                    height: 60px;

                    text-align: center;

                    img {
                        width: 36px;
                        height: 36px;
                        border: 1px solid red;
                        margin-top: 10px;
                    }
                }

                .top-text {
                    width: 59%;
                    height: 60px;

                    text-align: center;
                    padding-top: 10px;

                    .text-span {
                        font-size: 12px;
                        font-weight: 600;
                        margin-bottom: 4px;
                    }

                    .text-span-icon {
                        font-size: 14px;

                        img {
                            width: 12px;
                            height: 18px;
                            border: 1px solid red;
                            margin-top: 5px;
                        }

                        span {
                            color: #e9c05c;
                            margin-right: 5px;
                            margin-left: 5px;
                        }

                        button {
                            border: none;
                            width: 30px;
                            height: 20px;
                            font-size: 12px;
                            border-radius: 5px;
                            background-image: linear-gradient(90deg, #fba2b4, #ec5a96);
                            color: #fff;

                        }
                    }
                }

                .border-radius {
                    width: 12%;
                    height: 60px;
                    padding-left: 8px;

                    #border-radius-input {
                        width: 18px !important;
                        height: 18px !important;
                        margin-top: 10px;
                    }
                }
            }

            .conter-biaoqian {
                width: 95%;
                height: 48px;
                margin: 0 auto;
                margin-bottom: 5px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                text-align: center;
                line-height: 20px;
                overflow: auto;

                .conter-biaoqian1 {
                    width: 40%;
                    height: 20px;
                    border: 1px solid red;
                    font-size: 10px;
                    margin-right: 10px;
                    border-radius: 10px;
                    border: 1px solid #0085ff;
                    color: #0085ff;
                    margin-top: 2px;
                }
            }

            .conter-button {
                width: 85%;
                height: 56px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                text-align: center;
                line-height: 24px;

                .conter-el-button {
                    width: 45%;
                    height: 24px;
                    font-size: 12px;
                    background-image: linear-gradient(90deg, #f3cb9a, #f7b06e);
                    color: #fff;
                }
            }
        }
    }

    .member-pagination {
        margin: 0 auto;
        position: absolute;

        margin-top: 40.5%;
        margin-left: 40.5%;

        /deep/ .el-pager li {
            background-color: white;
        }
    }



    /deep/.el-drawer {
        width: 570px !important;
        height: 67% !important;
        margin-top: 103px;
        box-shadow: none;
    }
</style>